import { FcCheckBox, FcInput, FcSelect } from "@lib/FormControl";
import FcRange from "@lib/FormControl/Range";
import FcTextarea from "@lib/FormControl/Textarea";
import type { RouteDefinition } from "@solidjs/router";

const FormControlDemo = () => {
  const handleValueChanged = (name: string) => {
    return (value: any) => console.log(`[${name}] value changed`, value);
  };

  return (
    <div>
      <div>
        <h1>Input</h1>
        <FcInput
          controlSize="sm"
          placeholder="small input..."
          onChange={handleValueChanged("fc-input-1")}
        >
          123
        </FcInput>
        <FcInput
          placeholder="input..."
          onChange={handleValueChanged("fc-input-1")}
        >
          123
        </FcInput>
        <FcInput
          controlSize="lg"
          placeholder="large input..."
          onChange={handleValueChanged("fc-input-1")}
        >
          123
        </FcInput>
        <FcInput
          controlSize="lg"
          placeholder="large input..."
          onChange={handleValueChanged("fc-input-1")}
          value={'rrrr'}
          readonlyPlainText
        >
          123
        </FcInput>
      </div>
      <div>
        <h1>Select</h1>
        <FcSelect
          options={["1", "2", "3", "4", "5", "6"]}
          onChange={handleValueChanged("fc-select-1")}
          onSelect={(e) => console.log("fc-select-1", e)}
        >
          123
        </FcSelect>
        <FcSelect
          options={["1", "2", "3", "4", "5", "6"]}
          multiple
          onChange={handleValueChanged("fc-select-1")}
          onSelect={(e) => console.log("fc-select-1", e)}
        >
          123
        </FcSelect>

        <FcSelect
          value={[1, 2]}
          options={[
            { id: 1, name: "a" },
            { id: 2, name: "b" },
            { id: 3, name: "c" },
          ]}
          optionToLabel={"name"}
          optionToValue={"id"}
          multiple
          onChange={handleValueChanged("fc-select-2")}
        >
          123
        </FcSelect>
      </div>
      <div>
        <h1>CheckBox</h1>
        <FcCheckBox
          reverse
          id="example1"
          onChange={handleValueChanged("fc-checkbox-1")}
        >
          Default checkbox
        </FcCheckBox>
        <FcCheckBox
          reverse
          id="example2"
          onChange={handleValueChanged("fc-checkbox-1")}
          value={true}
        >
          Checked checkbox
        </FcCheckBox>
        <FcCheckBox
          reverse
          onChange={handleValueChanged("fc-checkbox-disabled")}
          disabled
        >
          Disabled Checkbox
        </FcCheckBox>
        <FcCheckBox
          reverse
          onChange={handleValueChanged("fc-checkbox-disabled-checked")}
          disabled
          checked
        >
          Disabled Checked Checkbox
        </FcCheckBox>
        <h1>Radio</h1>
        <FcCheckBox
          type="radio"
          id="example1"
          name="fcRadio"
          onChange={handleValueChanged("fc-radio-1")}
        >
          Default radio
        </FcCheckBox>
        <FcCheckBox
          type="radio"
          id="example2"
          name="fcRadio"
          onChange={handleValueChanged("fc-radio-1")}
          value={true}
        >
          Checked radio
        </FcCheckBox>
        <FcCheckBox
          type="radio"
          onChange={handleValueChanged("fc-radio-disabled")}
          disabled
        >
          Disabled radio
        </FcCheckBox>
        <FcCheckBox
          type="radio"
          onChange={handleValueChanged("fc-radio-disabled-checked")}
          disabled
          checked
        >
          Disabled Checked radio
        </FcCheckBox>
        <h1>Switch</h1>
        <FcCheckBox
          inline
          type="switch"
          id="example1"
          name="fcRadio"
          onChange={handleValueChanged("fc-switch-1")}
        >
          Default radio
        </FcCheckBox>
        <FcCheckBox
          inline
          type="switch"
          id="example2"
          name="fcRadio"
          onChange={handleValueChanged("fc-switch-1")}
          value={true}
        >
          Checked radio
        </FcCheckBox>
        <FcCheckBox
          inline
          type="switch"
          onChange={handleValueChanged("fc-switch-disabled")}
          disabled
        >
          Disabled radio
        </FcCheckBox>
        <FcCheckBox
          inline
          type="switch"
          onChange={handleValueChanged("fc-switch-disabled-checked")}
          disabled
          checked
        >
          Disabled Checked switch
        </FcCheckBox>
      </div>
      <div>
        <h1>Without Labels</h1>
        <FcCheckBox
          name="radio-without-labels"
          inline
          type={"radio"}
        ></FcCheckBox>
        <FcCheckBox
          name="radio-without-labels"
          inline
          type={"radio"}
        ></FcCheckBox>
        <FcCheckBox
          name="radio-without-labels"
          inline
          type={"radio"}
        ></FcCheckBox>
        <FcCheckBox
          name="radio-without-labels"
          inline
          type={"radio"}
        ></FcCheckBox>
      </div>
      <div>
        <h1>Range</h1>
        <FcRange
          min={1}
          max={10}
          step={0.5}
          onChange={handleValueChanged("fc-range-1")}
        ></FcRange>
      </div>
      <div>
        <h1>TextArea</h1>
        <FcTextarea
          onChange={handleValueChanged("fc-textarea-small")}
          controlSize="sm"
          placeholder="small..."
        ></FcTextarea>
        <FcTextarea
          onChange={handleValueChanged("fc-textarea-1")}
          placeholder="textarea..."
        ></FcTextarea>
        <FcTextarea
          onChange={handleValueChanged("fc-textarea-large")}
          placeholder="large..."
          controlSize="lg"
        ></FcTextarea>
        <FcTextarea disabled readonlyPlainText value="123\nggg"></FcTextarea>
      </div>
    </div>
  );
};

export const FormControlDemoRoute: RouteDefinition = {
  path: "/form-control",
  component: FormControlDemo,
};

export default FormControlDemo;
